<template>
  <div id="about" :class="{ h5: this.$store.state.webType === 'h5' }">
    <el-row :span="24" class="page">
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">{{
            $t('home')
          }}
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{ $t('about') }}</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="banner-view">
        <img
          src="@/assets/images/about/about-banner.png"
          alt="让世界遇见美好中国"
        />
      </div>
    </el-row>
    <div class="page-content">
      <!-- 《中国新闻发布》简介 -->
      <div class="introduction">
        <div class="content-title">
          <div class="title-txt">{{ $t('aboutUs') }}</div>
          <div class="title-label">
            {{ $t('objectiveAndFairInterpretation') }}
            <!-- <span>解疑释惑</span>
            <span>客观公正</span> -->
          </div>
        </div>
        <div class="content-html" v-html="webLinks.aboutText"></div>
      </div>

      <!-- {{$t('contact')}} -->
      <div class="contact">
        <div class="content-title">
          <div class="title-txt">{{ $t('contact') }}</div>
        </div>
        <div class="content-html">
          <p>{{ $t('editorialCenter') }}</p>
          <p>{{ $t('readerService') }}</p>
          <p>{{ $t('businessPromotion') }}</p>
        </div>
        <div class="contact-btns">
          <img class="contact-icon" src="@/assets/images/contact-icon.png"/>
          <div class="btn-item" @click="handleMessageShow(1)">
            {{ $t('email') }}
          </div>
          <div class="btn-item" @click="handleMessageShow(2)">
            {{ $t('message') }}
          </div>
        </div>
      </div>
    </div>

    <!-- {{$t('message')}} -->
    <el-drawer
      :title="$t('message')"
      :visible.sync="messageDialogVisible"
      direction="ltr"
      custom-class="message"
      :before-close="handleCloseMessage">
      <!--      <div class="contact-title">{{ $t('message') }}</div>-->
      <el-form
        ref="messageForm"
        :model="messageForm"
        :rules="rules"
        label-width="150px"
      >
        <el-form-item :label="$t('name')" prop="infoName">
          <el-input v-model="messageForm.infoName" :clearable="true"></el-input>
        </el-form-item>
        <el-form-item :label="$t('telephone')" prop="phone">
          <el-input v-model="messageForm.phone" :clearable="true"></el-input>
        </el-form-item>
        <el-form-item :label="$t('message2')" prop="info">
          <el-input
            type="textarea"
            :clearable="true"
            resize="none"
            rows="14"
            v-model="messageForm.info"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="code"
          :label="$t('verificationCode')"
          v-if="captchaEnabled"
        >
          <el-input
            v-model="messageForm.code"
            auto-complete="off"
            :placeholder="$t('verificationCode')"
            style="width: 60%"
            @keyup.enter.native="submitMessage('1')"
          >
            <svg-icon
              slot="prefix"
              icon-class="validCode"
              class="el-input__icon input-icon"
            />
          </el-input>
          <div class="login-code">
            <img
              :src="codeUrl"
              style="width: 100px"
              @click="getCode"
              class="login-code-img"
            />
          </div>
        </el-form-item>
      </el-form>
      <button class="submit-btn" @click="submitMessage('2')">
        {{ $t('submit') }}
      </button>
    </el-drawer>

    <!-- {{$t('email')}} -->
    <!--    <el-dialog-->
    <!--      :visible.sync="mailboxDialogVisible"-->
    <!--      custom-class="message mailbox"-->
    <!--      :before-close="handleCloseMailbox"-->
    <!--      top="5vh"-->
    <!--    >-->
    <el-drawer
      :title="$t('email')"
      :visible.sync="mailboxDialogVisible"
      direction="ltr"
      custom-class="message mailbox"
      :before-close="handleCloseMailbox">
      <!--      <div class="contact-title">{{ $t('email') }}</div>-->
      <el-form
        ref="messageForm"
        :model="messageForm"
        :rules="rules"
        :inline="true"
        label-width="150px"
        label-position="left"
      >
        <el-form-item :label="$t('name')" prop="infoName">
          <el-input v-model="messageForm.infoName" :clearable="true"></el-input>
        </el-form-item>
        <el-form-item :label="$t('company')" prop="unit">
          <el-input v-model="messageForm.unit" :clearable="true"></el-input>
        </el-form-item>
        <el-form-item :label="$t('telephone')" prop="phone">
          <el-input v-model="messageForm.phone" :clearable="true"></el-input>
        </el-form-item>
        <el-form-item :label="$t('address')" prop="address">
          <el-input v-model="messageForm.address" :clearable="true"></el-input>
        </el-form-item>
        <el-form-item :label="$t('email2')" prop="email">
          <el-input v-model="messageForm.email" :clearable="true"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('verificationCode')"
          prop="code"
          v-if="captchaEnabled && $store.state.webType === 'pc'"
        >
          <el-input
            v-model="messageForm.code"
            auto-complete="off"
            :placeholder="$t('verificationCode')"
            style="width: 60%"
            class="code-input"
            @keyup.enter.native="submitMessage('1')"
          >
            <svg-icon
              slot="prefix"
              icon-class="validCode"
              class="el-input__icon input-icon"
            />
          </el-input>
          <div class="login-code tg">
            <img
              :src="codeUrl"
              style="width: 100px"
              @click="getCode"
              class="login-code-img"
            />
          </div>
        </el-form-item>
        <br/>
        <el-form-item
          :label="$t('verificationCode')"
          prop="code"
          v-if="captchaEnabled && $store.state.webType === 'h5'"
        >
          <el-input
            v-model="messageForm.code"
            auto-complete="off"
            :placeholder="$t('verificationCode')"
            style="width: 60%"
            class="code-input"
            @keyup.enter.native="submitMessage('1')"
          >
            <svg-icon
              slot="prefix"
              icon-class="validCode"
              class="el-input__icon input-icon"
            />
          </el-input>
          <div class="login-code tg">
            <img
              :src="codeUrl"
              style="width: 100px"
              @click="getCode"
              class="login-code-img"
            />
          </div>
        </el-form-item>
        <br/>
        <el-form-item :label="$t('attach')" prop="fileUrl">
          <!-- <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              支持格式：Word、PDF、zip，文件大小不超过20M
            </div>
          </el-upload> -->
          <upload-Video
            :value="messageForm.fileUrl"
            @emitVideo="emitVideo"
          ></upload-Video>
        </el-form-item>
      </el-form>
      <button class="submit-btn" @click="submitMessage('1')">
        {{ $t('submit') }}
      </button>
    </el-drawer>
    <!--    </el-dialog>-->
  </div>
</template>

<script>
import goTop from '../components/goTop';
import uploadVideo from '../components/uploadVideo.vue';

export default {
  name: 'CharacterStory',
  components: {
    goTop,
    uploadVideo,
  },
  data() {
    return {
      codeUrl: '',
      // 验证码开关
      captchaEnabled: true,
      mailboxDialogVisible: false,
      messageDialogVisible: false,
      webLinks: {},
      messageForm: {
        infoName: '',
        phone: '',
        info: '',
        email: '',
        fileUrl: '',
        unit: '',
        address: '',
      },
      rules: {
        infoName: [
          {
            required: true,
            message: this.$t('pleaseName'),
            trigger: 'change'
          },
        ],
        address: [
          {
            required: true,
            message: this.$t('pleaseAddress'),
            trigger: 'change',
          },
        ],
        email: [
          {
            required: true,
            validator: this.checkEmail,
            trigger: 'change'
          },
        ],
        unit: [
          {
            required: true,
            message: this.$t('pleaseCompany'),
            trigger: 'change',
          },
        ],
        fileUrl: [
          {
            required: true,
            message: this.$t('pleaseAttachment'),
            trigger: 'change',
          },
        ],
        code: [
          {
            required: true,
            trigger: 'change',
            message: this.$t('pleaseCode')
          },
        ],
        phone: [
          {
            required: true,
            validator: this.checkMobile,
            trigger: 'change'
          },
        ],
        info: [
          {
            required: true,
            message: this.$t('pleaseMessage'),
            trigger: 'change',
          },
        ],
      },
    };
  },
  mounted() {
    this.webLinks = JSON.parse(sessionStorage.getItem('webLinks'));
    //  console.log(this.webLinks);
  },
  methods: {
    getCode() {
      this.$get(`${this.$api}/captchaImage`, {})
        .then((res) => {
          this.captchaEnabled =
            res.captchaEnabled === undefined ? true : res.captchaEnabled;
          if (this.captchaEnabled) {
            this.codeUrl = 'data:image/gif;base64,' + res.img;
            this.messageForm.uuid = res.uuid;
          }
        });
    },
    emitVideo(val) {
      //  console.log("emitVideo", val);
      this.messageForm.fileUrl = val;
      this.$refs['messageForm'].clearValidate(['fileUrl']);
    },
    handleMessageShow(type) {
      this.getCode();
      if (type == 1) {
        this.mailboxDialogVisible = true;
      } else {
        this.messageDialogVisible = true;
      }
    },
    handleCloseMessage() {
      this.messageDialogVisible = false;
    },
    handleCloseMailbox() {
      this.mailboxDialogVisible = false;
    },
    submitMessage(type) {
      //  console.log(type);
      this.$refs['messageForm'].validate((valid) => {
        //  console.log(valid);
        if (valid) {
          this.messageForm.message = type;
          this.$post(this.$api + '/cms/about/add', this.messageForm)
            .then((res) => {
              //  console.log(res);
              if (res.code === 200) {
                this.$message({
                  message:
                    this.$store.state.lang == 'CN'
                      ? '提交成功！'
                      : 'Submit Success！',
                  type: 'success',
                });
                this.handleCloseMessage();
                this.handleCloseMailbox();
              }
            })
            .catch((err) => {
              this.getCode();
            });
        } else {
          //  console.log("error submit!!");
          return false;
        }
      });
    },
    async checkMobile(rule, value) {
      if (value && value != '') {
        let reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
        if (this.$store.state.lang == 'EN') {
          return Promise.resolve();
        }
        if (reg.test(value)) {
          return Promise.resolve();
        } else {
          return Promise.reject('手机号格式错误');
        }
      } else {
        return Promise.reject(this.$t('pleaseTelephone'));
      }
    },
    async checkEmail(rule, value) {
      if (value && value != '') {
        let reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        let reg2 =
          /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*\.\w+([-.]\w+)$/;
        if (reg.test(value) || reg2.test(value)) {
          return Promise.resolve();
        } else {
          return Promise.reject(
            this.$store.state.lang == 'CN'
              ? '邮箱格式错误'
              : 'Email format error.'
          );
        }
      } else {
        return Promise.reject(this.$t('pleaseEmail'));
      }
    },

    submitUpload() {
      // this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      //  console.log(file, fileList);
    },
    handlePreview(file) {
      //  console.log(file);
    },
  },
};
</script>
<style lang="scss">
#about {
  .login-code {
    width: 33%;
    height: 38px;
    float: right;

    img {
      cursor: pointer;
      vertical-align: middle;
    }
  }

  #about.h5 p {
    font-size: fh(16vh, h5);
  }

  p {
    padding-top: fh(20vh, pc);
    font-size: fh(24vh, pc);
    line-height: fh(30vh, pc);
  }


  .submit-btn {
    width: fw(120vw, pc);
    height: fh(60vh, pc);
    background: #0046b4;
    border-radius: fw(4vw, pc);
    border: none;
    color: #fff;
    padding: 0;
    display: block;
    margin: 0 auto;
    margin-top: fh(60vh, pc);
    font-size: fh(18vh, pc);
    border-radius: 10px;
  }
}
</style>

<style lang="scss" scoped>
::v-deep .el-drawer.message.mailbox {
  .el-form {
    padding: fh(20vh, pc) fw(20vw, pc);
    padding-bottom: 0;
    padding-top: fh(40vh, pc);

    .el-form-item {
      width: calc(50% - 10px);

      .editPage__video p {
        width: 48vw;
      }

      .el-form-item__content {
        width: 80% !important;
      }

      &:nth-child(2n) {
        margin-right: 0;
      }

      .el-upload {
        width: 100% !important;

        .el-upload-dragger {
          width: 100%;
        }
      }

      .el-upload__tip {
        font-size: fh(16vh, pc);
        font-weight: 400;
        color: #9b9b9b;
        line-height: fh(24vh, pc);
        margin-bottom: fh(26vh, pc);
      }

      .el-progress-bar__outer {
        height: 4px !important;
      }

      .el-progress-bar__inner {
        background-color: $zh;
      }
    }
  }
}

::v-deep .el-drawer.message {
  width: fw(1100vw, pc) !important;
  padding: fh(40vh, pc) fw(40vw, pc);
  padding-top: 0;

  .el-drawer__header {
    color: #2e2e2e;
    font-size: fh(48vh, pc);
    line-height: fh(70vh, pc);
    padding-bottom: fh(20vh, pc);
    border-bottom: 2px solid #979797;
  }

  __header,
  __body {
    padding: 0;
  }

  .el-form {
    padding: fh(20vh, pc) fw(20vw, pc);
    padding-bottom: 0;
    padding-top: fh(40vh, pc);

    .el-form-item__content {
      width: fw(430vw, pc);
    }

    .el-form-item:nth-child(3) {
      .el-form-item__content {
        width: 80%;
      }
    }
  }
}

#about {
  position: relative;
  width: 100%;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url("../assets/images/about/about-bg.png") no-repeat;
    background-size: 100% auto;
    background-position: center 0;
  }

  .page {
    padding: fh(152vh, pc) fw(80vw, pc) 0 fw(80vw, pc);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.13) 0%,
        #ffffff 100%
    );

    ::v-deep .el-breadcrumb {
      // margin-left: fw(-40vw, pc);
      .el-breadcrumb__inner {
        font-weight: bold;
        color: #444 !important;
        font-size: fh(18vh, pc);
      }
    }
  }

  .page-content {
    background-color: #fff;
    padding: 0 fw(80vw, pc) fh(150vh, pc) fw(80vw, pc);

    .content-title {
      display: flex;
      width: 100%;
      align-items: center;
      padding: fh(20vh, pc) 0;
      font-size: fh(48vh, pc);
      line-height: fh(70vh, pc);
      color: #2e2e2e;
      border-bottom: 2px solid rgba(151, 151, 151, 0.5);

      .title-label {
        margin-left: auto;
        font-size: fh(36vh, pc);
        color: #9b9b9b;
        // span {
        //   font-size: fh(36vh, pc);
        //   color: #9b9b9b;
        //   &:nth-last-child(1) {
        //     margin-left: fw(30vw, pc);
        //   }
        // }
      }
    }
  }

  .banner-view {
    display: block;
    margin: fh(150vh, pc) auto fh(300vh, pc) auto;
    width: fw(730vw, pc);

    img {
      width: 100%;
    }
  }

  .introduction {
    position: relative;
    z-index: 99;
    top: fh(-150vh, pc);

    ::v-deep .content-html {
      font-size: fh(18vh, pc) !important;

      p {
        padding-top: fh(30vh, pc);
        font-size: fh(18vh, pc);
        line-height: fh(30vh, pc);
        text-align: left;
      }
    }
  }

  .contact {
    .content-html {
      margin: fh(80vh, pc) auto;
      width: max-content;
      text-align: center;

      p {
        padding-top: fh(20vh, pc);
        font-size: fh(24vh, pc);
        line-height: fh(30vh, pc);
      }
    }

    .contact-btns {
      position: relative;
      width: fw(300vw, pc);
      margin: 0 auto;

      .contact-icon {
        position: absolute;
        right: fw(-300vw, pc);
        top: 50%;
        transform: translateY(-50%);
        width: fw(230vw, pc);
      }

      .btn-item {
        padding: fh(20vh, pc);
        text-align: center;
        color: #fff;
        background-color: $zh;
        font-size: fh(18vh, pc);
        border-radius: 10px;

        &:nth-last-child(1) {
          margin-top: fh(20vh, pc);
        }

        &:hover {
          opacity: 0.8;
          cursor: pointer;
        }
      }
    }
  }
}

#about.h5 {
  ::v-deep .el-drawer.message {
    width: 100%;

    .submit-btn {
      width: 40vw;
    }

    .el-drawer__header {
      font-size: fh(24vh, h5);
    }

    .el-form {
      .el-form-item__label {
        width: 19% !important;
      }

      .el-input,
      .el-textarea {
        width: 96%;
      }

      .el-form-item__content {
        width: 80%;
        margin-left: 18% !important;
      }

      .login-code img {
        width: 100%;
      }

      .code-input {
        width: 100% !important;
      }

      .login-code.tg {
        position: relative;

        img {
          position: absolute;
          right: 0;
          top: 0;
          transform: translateX(115%) translateY(-100%);
        }
      }

      .el-form-item:nth-child(3) {
        .el-form-item__content {
          width: 80%;
        }
      }
    }
  }

  ::v-deep .el-drawer.message.mailbox {
    .el-form {
      .el-form-item {
        .el-form-item__label {
          width: 100% !important;
        }

        .el-form-item__content {
          width: 100% !important;
          margin-left: 0% !important;
        }

        .avatar-uploader,
        .editPage__video p {
          width: 90vw;
        }
      }
    }
  }

  .contact .contact-btns {
    width: 40vw;

    .contact-icon {
      width: 15vw;
    }
  }

  .banner-view {
    width: 80%;
    margin-top: 0;
    margin-bottom: fh(150vh, h5);

    img {
    }
  }

  .page-content {
    .content-title {
      font-size: fh(24vh, h5);
      line-height: fh(36vh, h5);
      flex-wrap: wrap;
      width: 100%;
      justify-content: center;
      padding-bottom: fh(0vh, h5);
      padding-top: 0;

      .title-txt {
        text-align: center;
      }

      .title-label {
        font-size: fh(16vh, h5);
        line-height: fh(36vh, h5);
        text-align: right;
        margin: 0;
        margin-left: auto;
      }
    }
  }
}
</style>

